<template>
	<div class="goods-seting-main">
		
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm goods-seting" >
		
	  <el-form-item label="秒杀订单超过" prop="name" label-width="150px">
		<el-input v-model="ruleForm.name" style="margin-right:10px"></el-input>
		<span style="color:rgb(72, 126, 246);font-size:14px">未付款，订单自动关闭</span>
		<span style="position: absolute;left:270px">分</span>
	  </el-form-item>
	  
	  <el-form-item label="拼团订单开团超过" prop="region" label-width="150px">
	  		<el-input v-model="ruleForm.region" style="margin-right:10px"></el-input>
			<span style="color:rgb(72, 126, 246);font-size:14px">未成团，订单自动关闭</span>
			<span style="position: absolute;left:270px">时</span>
	  </el-form-item>
	  
	  <el-form-item label="普通订单超过" prop="date1" label-width="150px">
	  		<el-input v-model="ruleForm.date1" style="margin-right:10px"></el-input>
			<span style="color:rgb(72, 126, 246);font-size:14px">未付款，订单自动关闭</span>
			<span style="position: absolute;left:270px">时</span>
	  </el-form-item>
	  
	  <el-form-item label="代提货超过" prop="date2" label-width="150px">
	  		<el-input v-model="ruleForm.date2" style="margin-right:10px"></el-input>
			<span style="color:rgb(72, 126, 246);font-size:14px">未提货，订单自动退款</span>
			<span style="position: absolute;left:270px">天</span>
	  </el-form-item>
	
	  <el-form-item label="订单完成超过" prop="desc" label-width="150px">
	  		<el-input v-model="ruleForm.desc" style="margin-right:10px"></el-input>
			<span style="color:rgb(72, 126, 246);font-size:14px">自动结束交易，订单自动关闭</span>
			<span style="position: absolute;left:270px">天</span>
	  </el-form-item>
		<el-button type="primary" icon="el-icon-check" style="width: 100px;height: 40px;margin-left: 150px; margin-top: 20px;">提交</el-button>
	</el-form>
	
	</div>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请设置秒杀订单时长'}
          ],
          region: [
            { required: true, message: '请设置拼团订单开团时长' }
          ],
          date1: [
            {required: true, message: '请设置普通订单时长'}
          ],
          date2: [
            { required: true, message: '请设置待提货时长'}
          ],
          desc: [
            { required: true, message: '请设置订单完成时长'}
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style>
	.goods-seting-main{
		width: 100%;
		height: 100%;
		display: flex;
		/* align-items: center; */
		justify-content: center;
		/* min-height: 100vh; */
		transform: translateY(40px);
		background-color: #fff;
	}
	.goods-seting{
		margin-top: 80px;
		width: 650px;
	}
	.goods-seting .el-input{
		width: 300px;
	}
</style>
